<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="9">
          <el-input clearable v-model="queryInfo.query" placeholder="请输入出库单号" prefix-icon="el-icon-search">
            <el-button slot="append" icon="el-icon-search" @click="getOutStorehouseList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="13">
          <el-button type="primary" @click="addOutStorehouseDialogVisible=true">新增</el-button>
          <el-button type="success" @click="check" icon = "el-icon-success">审核</el-button>
          <el-button type="danger" @click="cancel" icon = "el-icon-error">撤销审核</el-button>
          <el-button type="success" @click="out" icon = "el-icon-success">出库</el-button>
        </el-col>
      </el-row>
      <el-table :data="outStorehouseList.slice((queryInfo.pageNum-1)*queryInfo.pageSize,queryInfo.pageNum*queryInfo.pageSize)"
      style="width: 100%"
      stripe border fixed
      @selection-change="handleSelectionChange">
          <el-table-column
            fixed="left"
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="outStorehouseId"
            label="出库单号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="pickingId"
            label="拣货单号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="productName"
            label="商品名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="count"
            label="数量"
            width="180">
          </el-table-column>
          <el-table-column
            prop="locationId"
            label="货位编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="180">
          </el-table-column>
          <el-table-column
            prop="receivePerson"
            label="收件人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="addr"
            label="地址"
            width="180">
          </el-table-column>
          <el-table-column
            prop="outTime"
            label="出库时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="createPerson"
            label="创建人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="checkPerson"
            label="审核人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="checkTime"
            label="审核时间"
            width="180">
          </el-table-column>
          <el-table-column
            fixed="right"
            prop="operate"
            label="操作"
            width="180">
            <template slot-scope="scope" >
              <el-button type="primary" icon="el-icon-edit" size="small" @click="open(scope.row)">修改</el-button>
              <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteOutStorehouse(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

       <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
        </el-pagination>

      </el-card>

      <el-dialog title="新增出库" :visible.sync="addOutStorehouseDialogVisible" width="65%" @close="closeAddOutStorehouseDialog">

        <el-form :model="outStorehouseForm" :rules="rules" ref="addOutStorehouseRuleForm" label-width="100px" class="demo-ruleForm" :inline="true">
          <el-form-item label="条    码" prop="barCode">
            <el-select v-model="outStorehouseForm.barCode" placeholder="请选择"  clearable @change="getQuery">
                <el-option
                  v-for="item in barCodeList"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="商品名称" prop="productName" >
            <el-input v-model="outStorehouseForm.productName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="货位编号" prop="locationId">
            <el-select v-model="outStorehouseForm.locationId" placeholder="请选择"  clearable  @change="getQuery">
                <el-option
                  v-for="item in locationIdList"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="数    量" prop="count">
            <el-input-number v-model="outStorehouseForm.count" controls-position="right" :min="0" :max="availableQuantity"  clearable></el-input-number>
          </el-form-item>
          <el-form-item label="收货人" prop="receivePerson">
            <el-input v-model="outStorehouseForm.receivePerson"  clearable></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="addr">
            <el-input v-model="outStorehouseForm.addr" type="textarea"  clearable></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="addOutStorehouseDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addOutStorehouse">确 定</el-button>
        </div>
      </el-dialog>

    <el-dialog title="修改出库" :visible.sync="updataOutStorehouseDialogVisible" width="65%" @close="closeUpdataOutStorehouseDialog">
      <el-form :model="outStorehouse" :rules="rules" ref="updataOutStorehouseRuleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品条码" prop="barCode" >
          <el-input v-model="outStorehouse.barCode" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="productName" >
          <el-input v-model="outStorehouse.productName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="货位编号" prop="locationId">
          <el-input v-model="outStorehouse.locationId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="数    量" prop="count">
          <el-input v-model="outStorehouse.count" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="收货人" prop="receivePerson">
          <el-input v-model="outStorehouse.receivePerson"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="outStorehouse.addr" type="textarea"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="updataOutStorehouseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updataOutStorehouse">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      user: '',
      outStorehouseList: [],
      addOutStorehouseDialogVisible: false,
      updataOutStorehouseDialogVisible: false,
      outStorehouseForm: {
        outStorehouseId: '',
        productName: '',
        count: '',
        locationId: '',
        status: '',
        receivePerson: '',
        addr: '',
        outTime: '',
        createPerson: '',
        createTime: '',
        checkPerson: '',
        checkTime: ''
      },
      storehouseList: '',
      barCodeList: '',
      locationIdList: '',
      availableQuantity: 0,
      outStorehouse: '',
      selectOutStorehouseList: [],

      rules: {
        barCode: [
          { required: true, message: '请输入条码', trigger: 'blur' }
        ],
        locationId: [
          { required: true, message: '请输入货位', trigger: 'blur' }
        ],
        count: [
          { required: true, message: '请输入数量', trigger: 'blur' }
        ],
        receivePerson: [
          { required: true, message: '请输入收货人', trigger: 'blur' }
        ],
        addr: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSizeChange (val) {
      this.queryInfo.pageSize = val
      this.getOutStorehouseList()
    },

    handleCurrentChange (val) {
      this.queryInfo.pageNum = val
      this.getOutStorehouseList()
    },

    closeAddOutStorehouseDialog () {
      this.$refs.addOutStorehouseRuleForm.resetFields()
    },

    closeUpdataOutStorehouseDialog () {
      this.$refs.updataOutStorehouseRuleForm.resetFields()
    },

    handleSelectionChange (val) {
      this.selectOutStorehouseList = val
    },

    check () {
      for (var i = 0; i < this.selectOutStorehouseList.length; i++) {
        if (this.selectOutStorehouseList[i].status === '待审核') {
          this.selectOutStorehouseList[i].status = '已审核'
          this.selectOutStorehouseList[i].checkPerson = this.user
          this.outStorehouse = this.selectOutStorehouseList[i]
          this.checkAcancel()
          this.$message.success('订单' + this.selectOutStorehouseList[i].outStorehouseId + '审核成功')
        } else if (this.selectOutStorehouseList[i].status === '已审核') {
          this.$message.error('订单' + this.selectOutStorehouseList[i].outStorehouseId + '已审核')
        } else {
          this.$message.error('订单' + this.selectOutStorehouseList[i].outStorehouseId + '进行中')
        }
      }
    },

    cancel () {
      for (var i = 0; i < this.selectOutStorehouseList.length; i++) {
        if (this.selectOutStorehouseList[i].status === '已审核') {
          this.selectOutStorehouseList[i].status = '待审核'
          this.selectOutStorehouseList[i].createTime = ''
          this.selectOutStorehouseList[i].createPerson = ''
          this.outStorehouse = this.selectOutStorehouseList[i]
          this.checkAcancel()
          this.$message.success('订单' + this.selectOutStorehouseList[i].outStorehouseId + '撤销审核成功')
        } else if (this.selectOutStorehouseList[i].status === '待审核') {
          this.$message.error('订单' + this.selectOutStorehouseList[i].outStorehouseId + '未审核')
        } else {
          this.$message.error('订单' + this.selectOutStorehouseList[i].outStorehouseId + '进行中')
        }
      }
    },

    async checkAcancel () {
      const { data: result } = await this.$http.put('/outStorehouse/updataOutStorehouse', this.outStorehouse)
      if (result.status !== 200) return this.$message.error('更新失败')
      this.getOutStorehouseList()
    },

    async getQuery () {
      const { data: result } = await this.$http.get('/outStorehouse/getQuery', { params: this.outStorehouseForm })
      if (result.status !== 200) return this.$message.error('获取列表失败')
      this.barCodeList = result.data.barCodeList
      this.locationIdList = result.data.locationIdList
      this.availableQuantity = result.data.availableQuantity
      this.outStorehouseForm.productName = result.data.productName
      console.log(this.barCodeList)
    },

    async getOutStorehouseList () {
      const { data: result } = await this.$http.get('/outStorehouse/list', { params: this.queryInfo })
      if (result.status !== 200) return this.$message.error('获取列表失败')
      this.total = result.data.total
      this.outStorehouseList = result.data.rows
    },

    getId () {
      const now = new Date()
      this.outStorehouseForm.outStorehouseId = 'OT' + now.getTime()
    },

    addOutStorehouse () {
      this.$refs.addOutStorehouseRuleForm.validate(async validate => {
        this.getId()
        this.outStorehouseForm.status = '待审核'
        this.outStorehouseForm.createPerson = this.user
        if (!validate) return this.$message.error('请填写必填项')
        const { data: result } = await this.$http.post('/outStorehouse/addOutStorehouse', this.outStorehouseForm)
        if (result.status !== 200) return this.$message.error('添加失败')
        this.$message.success('添加成功')
        this.getOutStorehouseList()
        this.addOutStorehouseDialogVisible = false
      })
    },

    open (outStorehouse) {
      // this.outStorehouseForm.outStorehouseId = outStorehouse.outStorehouse
      // this.outStorehouseForm.barCode = outStorehouse.barCode
      // this.outStorehouseForm.productName = outStorehouse.productName
      // this.outStorehouseForm.locationId = outStorehouse.locationId
      // this.outStorehouseForm.count = outStorehouse.locationId
      // this.outStorehouseForm.status = outStorehouse.status
      // this.outStorehouseForm.receivePerson = outStorehouse.receivePerson
      // this.outStorehouseForm.addr = outStorehouse.addr
      // this.outStorehouseForm.createPerson = outStorehouse.createPerson
      if (outStorehouse.status !== '待审核') return this.$message.error('订单' + outStorehouse.outStorehouseId + '进行中')
      outStorehouse.count = 0
      this.outStorehouse = outStorehouse
      this.updataOutStorehouseDialogVisible = true
    },

    updataOutStorehouse () {
      this.$refs.updataOutStorehouseRuleForm.validate(async validate => {
        if (!validate) return this.$message.error('请输入必填项')
        const { data: result } = await this.$http.put('/outStorehouse/updataOutStorehouse', this.outStorehouse)
        if (result.status !== 200) return this.$message.error('更新数据失败')
        this.$message.success('更新成功')
        this.getOutStorehouseList()
        this.updataOutStorehouseDialogVisible = false
      })
    },

    deleteOutStrorehouse (outStorehouse) {
      console.log(outStorehouse)
      if (outStorehouse.status !== '待审核') return this.$message.error('订单' + this.outStorehouse.outStorehouseId + '进行中')
      this.outStorehouse = outStorehouse
      console.log(this.outStorehouse)
      this.deleteOutStorehouse()
      this.getOutStorehouseList()
      this.outStorehouse = ''
    },

    async deleteOutStorehouse (outStorehouse) {
      const result = await this.$confirm('此操作将永久删除' + outStorehouse.outStorehouseId + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)
      if (result !== 'confirm') return this.$message.info('用户取消操作')
      const { data: resultDB } = await this.$http.delete(`/outStorehouse/delete/${outStorehouse.outStorehouseId}/${outStorehouse.count}/${outStorehouse.locationId}`)
      if (resultDB.status !== 200) return this.$message.error('删除订单失败')
      this.getStorehouseList()
      this.$message.success('订单删除成功')
    },

    async out () {
      for (var i = 0; i < this.selectOutStorehouseList.length; i++) {
        if (this.selectOutStorehouseList[i].status === '已拣货') {
          this.selectOutStorehouseList[i].status = '已出库'
          this.outStorehouse = this.selectOutStorehouseList[i]
          const { data: result } = await this.$http.put('/outStorehouse/out', this.outStorehouse)
          this.$message.success('订单' + this.selectOutStorehouseList[i].outStorehouseId + '出库成功')
        } else {
          this.$message.error('订单' + this.selectOutStorehouseList[i].outStorehouseId + '进行中')
        }
      }
      this.getOutStorehouseList()
    }

  },
  mounted () {
    this.getOutStorehouseList()
    this.getQuery()
    // this.getStorehouse()
    this.user = window.sessionStorage.getItem('token').substr(32)
  }
}
</script>

<style>
</style>
